<template>
  <card-component
    :content-title="contentTitle"
    :tv="showTv"
    :showClock = "showClock"
    :page="page"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange">

    <action-componet slot='action'
                     :shiftType="shiftType"
                     :nowProduce = "nowProduce"
                     :waitProduce = "waitProduce"
                     @updateNowProduce="updateNowProduce"
                     @updateWaitProduce ="updateWaitProduce"></action-componet>

    <table-component
      slot="table"
      :table-header="tableHeader"
      :table-data="tableData"
      :samewidth="true"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
    ></table-component>

    <remark-dialog
      slot="dialog"
      :dialogVisible="dialogVisible"
      :formData="formData"
      :rowIndex="rowIndex"
      @cancelDialog="cancelDialog"
      @confrimDialog="confrimDialog"
    ></remark-dialog>
  </card-component>

</template>

<script>


  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import remarkDialog from '@/base/editLineHourInfoDialog.vue'
  import lineStatusAction from '@/base/lineStatusAction.vue'
  import request from '@/common/js/request'
  import util from '@/common/js/util'

  export default {
    data() {
      return {

        chanxian: '',
        contentTitle:this.$getTextByLangKey('生产状况'),

        nowProduce: {},
        waitProduce: {},

        tableHeader: [],
        tableData: [],
        showClock:false,
        showTv:false,

        page: null,


        dialogVisible: false,
        formData: {
          designedOutput: '',//计划产出
          note: '',//备注
        },
        rowIndex:0,

//        这是实现自动刷新功能的
        timer:'',
        isRequesting:false,
        shiftType:''
      }
    },
    created: function () {

      this.fetchData()

    },

    destroyed:function () {
      this.stopTimer()
      console.log('---- destroyed ----')
    },


    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {

      fetchData: function () {

        this.stopTimer()
        this.tableHeader =  []
        this.tableData = []
        this.nowProduce = {}
        this.waitProduce = {}

        this.chanxian = this.$route.query.chanxian
        this.contentTitle = this.chanxian +this.$getTextByLangKey('生产状况')

        let path = this.$route.path
        if (path.startsWith('/wrapper')) {
          this.showTv = true
          this.showClock = false
        } else {

          this.showTv = false
          this.showClock = true
        }

        this.creatTimer()
      },


      handleEdit: function (index, row) {
//        console.log(index)
//        console.log(row)
//        console.log('--------')
//        this.$emit('handleEdit', index, row)

        this.dialogVisible  = true
        this.formData = util.deepCopy(row)
        this.rowIndex= index
      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
//        console.log('sbsbsbsb')
        this.page.currentPage = val
//        this.fetchData()
      },

      cancelDialog: function () {
        this.dialogVisible = false;
      },
      confrimDialog: function (val,index) {
        this.dialogVisible = false;
        let data = {id:val.id,designedOutput:val.designedOutput,note:val.note}
        request.requestUpdateProducingHours(data,res=>{
          let tableData =  util.deepCopy(this.tableData)
          tableData[index] = val
          this.tableData = tableData
          util.showSuccessToast(this.$getTextByLangKey('修改成功'))
        })
      },
      updateNowProduce:function (val) {
        val.startTime = this.getTimeToDate(val.startTime)
        val.finalTime = this.getTimeToDate(val.finalTime)
        val.estimateFinishTime = this.getTimeToDate(val.estimateFinishTime)
        val.estimateStartTime = this.getTimeToDate(val.estimateStartTime)
        this.nowProduce = val
      },

      updateWaitProduce:function (val) {
        val.startTime = this.getTimeToDate(val.startTime)
        val.finalTime = this.getTimeToDate(val.finalTime)
        val.estimateFinishTime = this.getTimeToDate(val.estimateFinishTime)
        val.estimateStartTime = this.getTimeToDate(val.estimateStartTime)
        this.waitProduce = val
      },


      creatTimer:function () {
        this.autoRequest()
        if(this.$route.query.autoRequest === 'off'){
          console.log('关闭自动请求产线状态')
          return
        }
        this.timer = setInterval(()=>{
          if(!this.isRequesting){
//            console.log('开始自动请求')
            this.autoRequest()
          }else{
//            console.log('请求结果未返回')
          }
        },5000)
      },
      stopTimer:function () {
        clearTimeout(this.timer)
        this.isRequesting = false
      },

      getTimeToDate: function (time) {

        if (time != null) {
          var date = new Date(time).format("yyyy/MM/dd hh:mm")
          return date
        }
        return ''
      },
      autoRequest:function () {
        this.isRequesting = true
        request.requestLineStatus(this.chanxian, res => {
          this.isRequesting = false
          if(res.data.data.nowProduce===null){
            this.nowProduce = {}
          }else{
            let nowProduce = res.data.data.nowProduce
            nowProduce.startTime = this.getTimeToDate(nowProduce.startTime)
            nowProduce.finalTime = this.getTimeToDate(nowProduce.finalTime)
            nowProduce.estimateFinishTime = this.getTimeToDate(nowProduce.estimateFinishTime)
            nowProduce.estimateStartTime = this.getTimeToDate(nowProduce.estimateStartTime)
            this.nowProduce = nowProduce
          }

          if(res.data.data.waitProduce===null){
            this.waitProduce = {}
          }else{
            let waitProduce = res.data.data.waitProduce
            // waitProduce.startTime = this.getTimeToDate(waitProduce.startTime)
            // waitProduce.startTime2 = this.getTimeToDate(waitProduce.startTime2)
            // waitProduce.startTime3 = this.getTimeToDate(waitProduce.startTime3)
            waitProduce.finalTime = this.getTimeToDate(waitProduce.finalTime)
            waitProduce.estimateFinishTime = this.getTimeToDate(waitProduce.estimateFinishTime)
            waitProduce.estimateStartTime = this.getTimeToDate(waitProduce.estimateStartTime)
            this.waitProduce = waitProduce
          }
//          this.nowProduce = res.data.data.nowProduce===null?{}:res.data.data.nowProduce
//          this.waitProduce = res.data.data.waitProduce===null?{}:res.data.data.waitProduce

          this.contentTitle = this.chanxian + this.$getTextByLangKey('生产状况')+' （ '+ this.$getTextByLangKey('当前') +'：'+res.data.data.shiftType+' ）'
          this.shiftType = res.data.data.shiftType
          console.log(res.data.data)

          this.tableHeader = this.makeHeader(res.data.data.headers)
//          this.tableHeader = [{prop:'createTime',label: '名称', isShow: true}, ]

          this.tableData = this.makeList(res.data.data.producingHours)

        },res=>{
          this.isRequesting = false
        })
      },

      makeHeader: function (list) {

        let indexItem = {
          type: 'index', isShow: true,
          width: '65', label: 'NO.',
        }

        let actionItem = {type: "action", label: this.$getTextByLangKey('操作'), isShow: true}
//        let selectionItem = {
//          type: 'selection', isShow: true
//        }
        var header = [indexItem]
        list.forEach(function (item) {
          item.isShow = true
          header.push(item)
        }, this)

        header.push(actionItem)
        return header
      },


      makeList: function (list) {
        var data = []
        list.forEach(function (item) {
          item.action='edit'
          item.efficiency = item.efficiency===0?0:item.efficiency+'%'
          data.push(item)
        }, this)
        return data

      },




    },



    components: {
      'card-component': card,
      'table-component': table,
      'action-componet': lineStatusAction,
      'remark-dialog':remarkDialog
    },

  }
</script>


<style scoped lang="stylus">
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
    width 100%
    box-sizing border-box
  }

</style>


